<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>基础面板</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            面板标题
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            <i class="fa fa-info-circle"></i> 面板标题
                            <small>面板副标题</small>
                            <label class="label label-danger pull-right">New</label>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            面板标题
                            <div class="tools">
                                <a href="#">详情</a>
                                <a href="#">更多</a>
                            </div>
                            <div class="tools pull-right">
                                <a href="#">详情</a>
                                <a href="#">更多</a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            面板标题
                            <div class="tools">
                                <span class="hoverdown">
                                    <a class="hoverdown-toggle" href="javascript:;">
                                        下拉选项
                                    </a>
                                    <div class="hoverdown-menu">
                                        <ul>
                                            <li>
                                                <a href="#">操作一</a>
                                            </li>
                                            <li>
                                                <a href="#">操作二</a>
                                            </li>
                                        </ul>
                                    </div>
                                </span>
                            </div>
                            <div class="tools pull-right">
                                <a href="#"><i class="fa fa-chevron-down panel-collapse"></i></a>
                                <span class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"> <i
                                            class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a href="#">新增</a>
                                        </li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                    </ul>
                                </span>

                                <a href="#"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            面板标题-default
                            <div class="tools pull-right">
                                <a href="#"><i class="fa fa-chevron-down panel-collapse"></i></a>
                                <span class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"> <i
                                            class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a href="#">新增</a>
                                        </li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                    </ul>
                                </span>

                                <a href="#"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            面板标题-primary
                            <div class="tools pull-right">
                                <a href="#"><i class="fa fa-chevron-down panel-collapse"></i></a>
                                <span class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"> <i
                                            class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a href="#">新增</a>
                                        </li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                    </ul>
                                </span>

                                <a href="#"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            面板标题-success
                            <div class="tools pull-right">
                                <a href="#"><i class="fa fa-chevron-down panel-collapse"></i></a>
                                <span class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"> <i
                                            class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a href="#">新增</a>
                                        </li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                    </ul>
                                </span>

                                <a href="#"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            面板标题-info
                            <div class="tools">
                                <a href="#">详情</a>
                                <a href="#">更多</a>
                            </div>
                            <div class="tools pull-right">
                                <a href="#"><i class="fa fa-chevron-down panel-collapse"></i></a>
                                <span class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"> <i
                                            class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a href="#">新增</a>
                                        </li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                    </ul>
                                </span>

                                <a href="#"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-warning">
                        <div class="panel-heading">
                            面板标题-warning
                            <div class="tools pull-right">
                                <a href="#"><i class="fa fa-chevron-down panel-collapse"></i></a>
                                <span class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"> <i
                                            class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a href="#">新增</a>
                                        </li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                    </ul>
                                </span>

                                <a href="#"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            面板标题-danger
                            <div class="tools pull-right">
                                <a href="#"><i class="fa fa-chevron-down panel-collapse"></i></a>
                                <span class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;"> <i
                                            class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a href="#">新增</a>
                                        </li>
                                        <li>
                                            <a href="#">编辑</a>
                                        </li>
                                    </ul>
                                </span>

                                <a href="#"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <h4>小池</h4>
                            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
                            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
                        </div>
                        <div class="panel-footer">面板底部</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>